<template>
  <div class="containerbox">
    <div class="container">
      <el-descriptions title="收货人信息">
        <el-descriptions-item label="收货人姓名" v-if="form.take == 2">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="收货人电话" v-if="form.take == 2">{{ form.mobile }}</el-descriptions-item>
        <el-descriptions-item label="收货人地址" v-if="form.take == 2">{{ form.address }}</el-descriptions-item>
        <el-descriptions-item label="订单编号">{{ id }}</el-descriptions-item>
        <!-- <el-descriptions-item label="订单备注">{{ form.remarks }}</el-descriptions-item> -->
        <el-descriptions-item label="支付方式">{{ ['余额', '微信', '支付宝', '银行卡'][form.pay_type] }}</el-descriptions-item>
        <el-descriptions-item label="取餐码" v-if="form.take !== 2">{{ form.takeinfo
          }}</el-descriptions-item>
        <el-descriptions-item label="支付时间">{{ parseDateTime(form.CreatedAt)
          }}</el-descriptions-item>
        <el-descriptions-item label="取餐方式">{{ ['堂食', '打包外带', '外送'][form.take]
          }}</el-descriptions-item>
        <el-descriptions-item label="订单状态"> {{
          ["更新取餐码", "", "", "出餐完成", "配送中", "已完成", "出餐失败退款", "", "", "部分退款"][
          form.status
          ]
        }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :title="'商品详情'" direction="vertical" :column="2">
        <el-descriptions-item :label="itme.name" v-for="(itme, index) in shopping_list" :key='index'>
          <div class="flex">
            <el-image style="width: 100px; height: 100px" :src="itme.default_image"
              :preview-src-list="[itme.default_image]">
            </el-image>
            <div class="mar">
              <div>价格：{{ itme.total }}</div>
              <div>成本价：{{ itme.original }}</div>
              <div>卖价：{{ itme.price }}</div>
              <div>ZKFC：{{ itme.zkfc }}</div>
              <div>数量：{{ itme.quantity }}</div>
            </div>

            <div class="goodslist">
              <div class="goodsdetail" v-for="(it, i) in itme.goods" :key="i">
                <div>{{ it.name }} x </div>
                <div> {{ it.number }}</div>
              </div>
            </div>
          </div>

        </el-descriptions-item>

      </el-descriptions>
      <el-descriptions title="商家详情">
        <el-descriptions-item label="商家名字">{{ form.store_name }}</el-descriptions-item>
        <el-descriptions-item label="商家地址">{{ form.store_address }}</el-descriptions-item>

      </el-descriptions>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {},
      order_logistics: '',
      order_waybill: '',
      shopping_list: [],
      id: 0,
      data: {},
      list: ["顺丰", '邮政', '中通', '圆通', '申通', '京东', '百世快递', '韵达', '德邦', '天天', '极兔', '其他'],
      fahuo: 0,
      state: 0,
      orderid: ''
    };
  },
  created() {
    this.id = this.$route.query.id

    this.getdata(this.id)
  },

  methods: {

    maijia(row) {
      let price = parseFloat(row.price)
      let amount = parseFloat(row.amount)
      let str = 0
      if (amount * 1.1 > price) {
        str = (price - amount) / 100 * 20 + amount
      } else {
        str = amount * 1.1
      }
      return str.toFixed(2)
    },

    geteval(img) {
      try {
        return eval('(' + img + ')')
      } catch (error) {
        return []
      }

    },
    getdata(id) {
      this.request('api/openapi/kfc/getOrder/', 'post', { out_order_no: id }).then(res => {
        console.log(res, "Res")
        this.form = res.data
        this.form['address'] = res.data.province + res.data.city + res.data.area + res.data.detailed
        this.orderid = res.data.order_id
        //处理详情
        let goods = JSON.parse(res.data.goods)
        let goods_detail = JSON.parse(res.data.goods_detail)
        console.log(goods, "goods")
        let arr = []
        goods.forEach((items) => {
          let obj = {}
          goods_detail.forEach((item) => {
            if (items.productId == item.customization_data.id) {
              item.rules.forEach((ite) => {
                if (ite.code == items.skuId) {
                  obj = {
                    total: items.total,
                    price: items.price.toFixed(2),
                    zkfc: (items.total - items.price).toFixed(2),
                    original: items.original.toFixed(2),
                    name: item.customization_data.name,
                    selactive: '',
                    default_image: item.customization_data.default_image,
                    quantity: items.num,
                    goods: []
                  }
                  //先来找温度杯型
                  let coffee_sku_mapping = item.coffee_sku_mapping
                  let coffeelist = [] //温度杯型
                  if (coffee_sku_mapping.Grande_Cold.key) {
                    coffee_sku_mapping.Grande_Cold.name = '大杯冷'
                    coffeelist.push(coffee_sku_mapping.Grande_Cold)
                  }
                  if (coffee_sku_mapping.Grande_Hot.key) {
                    coffee_sku_mapping.Grande_Hot.name = '大杯热'
                    coffeelist.push(coffee_sku_mapping.Grande_Hot)
                  }
                  if (coffee_sku_mapping.Tall_Cold.key) {
                    coffee_sku_mapping.Tall_Cold.name = '中杯冷'
                    coffeelist.push(coffee_sku_mapping.Tall_Cold)
                  }
                  if (coffee_sku_mapping.Tall_Hot.key) {
                    coffee_sku_mapping.Tall_Hot.name = '中杯热'
                    coffeelist.push(coffee_sku_mapping.Tall_Hot)
                  }
                  if (coffee_sku_mapping.Venti_Cold.key) {
                    coffee_sku_mapping.Venti_Cold.name = '超大杯冷'
                    coffeelist.push(coffee_sku_mapping.Venti_Cold)
                  }
                  if (coffee_sku_mapping.Venti_Hot.key) {
                    coffee_sku_mapping.Venti_Hot.name = '超大杯热'
                    coffeelist.push(coffee_sku_mapping.Venti_Hot)
                  }

                  coffeelist.forEach((it) => {
                    if (it.sku_id == items.skuId) {
                      obj.selactive += it.name + '/'
                    }
                  })
                  items.addExtra.forEach((ites) => {
                    let newobj = {}
                    ite.rules.forEach((ite) => {
                      ite.group_detail_rules.forEach((it) => {
                        if (it.group_detail_code == ites.extra_sku) {
                          newobj.name = it.name
                          newobj.number = ites.qty
                          obj.goods.push(newobj)
                        }
                      })

                    })
                  })
                }
              })
            }
          })
          arr.push(obj)
        })
        this.shopping_list = arr
        console.log(this.shopping_list, "this.shopping_list")

      })
    },
    submit() {
      let that = this
      this.request('admin/order/', 'post', { 'order': this.id, 'logistics': this.order_logistics, 'waybill': this.order_waybill }).then(res => {
        if (res.errno == 0) {
          this.$message.success('发货成功');
          setTimeout(function () {
            that.$router.push('/order/order')
          }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    submits() {
      let taht = this
      this.request('admin/order/', 'DELETE', { 'order': this.orderid }).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
          setTimeout(function () {
            taht.$router.push('/order/order')
          }, 500);
        } else {
          this.$message.error(res.errmsg)
        }
      })
    },
    //时间
    parseDateTime(dateTimeStr) {
      // 创建一个新的 Date 对象
      const date = new Date(dateTimeStr);

      // 获取年份、月份、日期、小时、分钟和秒
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      // 返回格式化后的字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },

}
</script>

<style scoped="scoped" lang="scss">
.containerbox {
  padding: 20px;
}

.goodslist {
  margin-left: 20px;

  .goodsdetail {
    display: flex;
  }

}






.submt {

  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.flex {
  display: flex;

  .mar {
    margin-left: 10px;
  }
}

.el-descriptions {
  margin-top: 20px;
}
</style>
